<template>
  <div>
    <div class="home_img"><img src="../../../../assets/images/u58.png" alt="" /></div>
    <div class="content_android">
      <div class="tabswitch">
        <div
          :class="item.booer ? 'tabsuw' : ''"
          v-for="item in tablist"
          :key="item.id"
          @click="tabstate(item)"
        >
          {{ item.name }}
        </div>
      </div>

      <!-- 入住体验 -->
      <div class="checkFrom" v-if="id == '1'">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="联系人"
            label-align="left"
            label="联系人"
            placeholder="联系人"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="password"
            name="联系电话"
            label="联系电话"
            placeholder="请输入手机号码"
            :rules="[{ required: true }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="项目"
            placeholder="点击选择项目"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                color="rgba(247, 139, 15, 1)"
                style="padding: 0rem 1.5rem 0rem 1.5rem"
                size="small"
                type="primary"
                @click="countDown"
                block
                >{{ btnMsg || countNum }}</van-button
              >
            </template>
          </van-field>
          <div>
            <label>备注</label>
            <textarea
              cols="8"
              placeholder="请填写您的申请备注。(300字以内)"
              rows="20"
            ></textarea>
          </div>
          <div style="margin-top: 2rem">
            <van-button
              block
              color="rgba(247, 139, 15, 1)"
              type="info"
              style="border-radius: 0.4rem; font-size: 1.7rem"
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>

      <!-- 志愿服务 -->

      <div class="checkFrom"  v-if="id == '2'">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="联系人"
            label-align="left"
            label="联系人"
            placeholder="联系人"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="password"
            name="联系电话"
            label="联系电话"
            placeholder="请输入手机号码"
            :rules="[{ required: true }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="项目"
            placeholder="点击选择项目"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="类型"
            placeholder="类型"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                color="rgba(247, 139, 15, 1)"
                style="padding: 0rem 1.5rem 0rem 1.5rem"
                size="small"
                type="primary"
                @click="countDown"
                block
                >{{ btnMsg || countNum }}</van-button
              >
            </template>
          </van-field>
          <div>
            <label>备注</label>
            <textarea
              cols="8"
              placeholder="请填写您的申请备注。(300字以内)"
              rows="20"
            ></textarea>
          </div>
          <div style="margin-top: 2rem">
            <van-button
              block
              color="rgba(247, 139, 15, 1)"
              type="info"
              style="border-radius: 0.4rem; font-size: 1.7rem; height: 4.9rem"
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>

      <!-- 招商合作 -->
      <div class="checkFrom"  v-if="id == '3'">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="企业/组织"
            label-align="left"
            label="企业/组织"
            placeholder="请添加企业/组织名称"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="password"
            name="联系人"
            label="联系人"
            placeholder="请输入联系人姓名"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="password"
            name="联系电话"
            label="联系电话"
            placeholder="请输入手机号码"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                color="rgba(247, 139, 15, 1)"
                style="padding: 0rem 1.5rem 0rem 1.5rem"
                size="small"
                type="primary"
                @click="countDown"
                block
                >{{ btnMsg || countNum }}</van-button
              >
            </template>
          </van-field>
          <div>
            <label>备注</label>
            <textarea
              cols="8"
              placeholder="请填写您的申请备注。(300字以内)"
              rows="20"
            ></textarea>
          </div>
          <div style="margin-top: 2rem">
            <van-button
              block
              color="rgba(247, 139, 15, 1)"
              type="info"
              style="border-radius: 0.4rem; font-size: 1.7rem"
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>

      <!-- 参观学习 -->

      <div class="checkFrom"  v-if="id == '4'">
        <van-form @submit="onSubmit">
          <van-field
            v-model="ceckinexperience.username"
            name="联系人"
            label="联系人"
            placeholder="请输入联系人姓名"
            :rules="[{ required: true }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="ceckinexperience.project"
            label="项目"
            placeholder="点击选择项目"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="password"
            name="联系电话"
            label="联系电话"
            placeholder="请输入手机号码"
            :rules="[{ required: true }]"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="类型"
            placeholder="类型"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
          <van-field
            v-model="username"
            name="请输入参观人数"
            label="参观人数"
            placeholder="请输入请输入参观人数"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                color="rgba(247, 139, 15, 1)"
                style="padding: 0rem 1.5rem 0rem 1.5rem"
                size="small"
                type="primary"
                @click="countDown"
                block
                >{{ btnMsg || countNum }}</van-button
              >
            </template>
          </van-field>
          <div>
            <label>备注</label>
            <textarea
              cols="8"
              placeholder="请填写您的申请备注。(300字以内)"
              rows="20"
            ></textarea>
          </div>
          <div style="margin-top: 2rem">
            <van-button
              block
              color="rgba(247, 139, 15, 1)"
              type="info"
              style="border-radius: 0.4rem; font-size: 1.7rem"
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
      <!-- 底部内容 -->
      <div class="bottom_con">
        <div class="bottom_con_a">
          <p>
            <span>志愿服务说明：</span
            >招募30以上名志愿者（包括2名以上会理发的志愿者），给老人家们送去关怀;为他们理发，让他们每天都神采奕奕：与长者一起谈心，倾听他们讲过去的事情，分享他们的人生经历。慰问长者，表演节目，给老人带去快乐的笑声，一起渡过一个愉快且有意义的假日。欢迎各位有爱心的人士参与及推荐合适人选。
          </p>
        </div>
        <div class="bottom_con_b">
          <img src="../../../../assets/images/u100.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      sms: "",
      value: "",
      columns: ["槿椿颐养中心", "宁波", "温州", "嘉兴", "湖州"],
      showPicker: false,
      tablist: [
        {
          name: "入住体验",
          booer: true,
          id: "1",
        },
        {
          name: "志愿服务",
          booer: false,
          id: "2",
        },
        {
          name: "合作招商",
          booer: false,
          id: "3",
        },
        {
          name: "参观学习",
          booer: false,
          id: "4",
        },
      ],
      ceckinexperience:{
        username:'',
        project:'槿椿颐养中心',
        parentnumber:'',
        type:'',
        numberofpersons:"",
      },
      
      id:"1",
      // 倒计时周期
      countNum: 60,
      // 用于倒计时标记，true-正在倒计时
      countFlag: false,
      btnMsg: "获取验证码",
    };
  },
  methods: {
    tabstate(vlaue) {
      for (const a of this.tablist) {
        if (a.id == vlaue.id) {
          a.booer = true;
        } else {
          a.booer = false;
        }
        this.id = vlaue.id;
      }
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    // 发送倒计时
    countDown() {
      this.countFlag = !this.countFlag;
      if (this.btnMsg) {
        this.btnMsg = null;
        this.intervalBtn = setInterval(() => {
          if (this.countNum <= 0) {
            this.btnMsg = "获取验证码";
            clearInterval(this.intervalBtn);
            this.countFlag = !this.countFlag;
            this.countNum = 60;
          }
          // 倒计时
          this.countNum--;
        }, 1000);
      } else {
        // alert("请勿重复操作");
      }
    },
  },
};
</script>
<style scoped>
.content_android {
  margin: 1.2rem 1.5rem 4rem 1.5rem;
  overflow: hidden;
}
.home_img {
  width: 100%;
  height: 8.6rem;
}
.home_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tabswitch {
  display: inline-flex;
  text-align: center;
  overflow: hidden;
  line-height: 3rem;
  margin-top: 1rem;
  border-bottom: 2px solid rgba(247, 139, 15, 1);
}
.tabswitch div {
  width: 8.6rem;
  height: 3rem;
  opacity: 1;
  font-size: 1.4rem;
}
.tabsuw {
  background: #f78b0f;

  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  font-size: 1.4rem;
}
.checkFrom {
  margin-top: 1.2rem;
}
.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 0px !important;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
textarea {
  background: rgba(0, 0, 0, 0.1);
  width: 32.5rem;
  height: 10.2rem;
  border: 0;
  padding: 0.8rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1.4rem;
  border-radius: 0.4rem;
}

.van-cell {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 1.6rem 0px !important;
  overflow: hidden;
  color: #323233;
  font-size: 1.4rem !important;
  line-height: 24px;
  background-color: #fff;
}
label {
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.85);
  line-height: 4rem;
}
.bottom_con {
  margin-top: 4rem;
}
.bottom_con_a p {
  font-size: 1.4rem;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 2.2rem;
  /* float: inline-start; */
}
.bottom_con_a span {
  color: rgba(213, 16, 16, 1) !important;
}
.bottom_con_b {
  width: 34.5rem;
  height: 19.5rem;
  margin-top: 1.6rem;
}
.bottom_con_b img {
  width: 100%;
  height: 100%;
}
</style>